<template>
  <el-drawer
    title="历史记录"
    :visible.sync="value"
    :direction="direction"
    :modal="false"
    @closed="historydrawerClose"
  >
    <el-empty description="没有更多记录" v-if="data == null"></el-empty>
    <div v-else class="historylist">
      <div
        class="listitem"
        v-for="(i, index) in data"
        :key="index"
        @click="routeChange(i.query, i.path)"
      >
        <div class="itemimg">
          <img src="http://101.43.86.55/static/markdown2.jpg" alt="" />
        </div>

        <div class="itemhead">
          <span class="title">{{ i.name }}</span>
          <span class="time"><i class="el-icon-monitor"></i>{{ i.time }}</span>
        </div>
      </div>
      <p>💢💢💢没了没了</p>
    </div>
  </el-drawer>
</template>

<script>
import { local } from "@/assets/js/local.js";
import { GetTime } from "@/assets/js/GetTime.js";

export default {
  name: "historydrawer",
  data() {
    return {
      direction: "rtl",
      data: [],
    };
  },
  // props: {
  //   historydrawershow: {
  //     type: Boolean,
  //   },
  // },
  mounted() {
    this.readHistory();
  },
  methods: {
    historydrawerClose() {
      this.$emit("historydrawerclose");
    },
    utf8to16(str) {
      var out, i, len, c;
      var char2, char3;
      out = "";
      len = str.length;
      i = 0;
      while (i < len) {
        c = str.charCodeAt(i++);
        switch (c >> 4) {
          case 0:
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
          case 6:
          case 7:
            // 0xxxxxxx
            out += str.charAt(i - 1);
            break;
          case 12:
          case 13:
            // 110x xxxx 10xx xxxx
            char2 = str.charCodeAt(i++);
            out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
            break;
          case 14:
            // 1110 xxxx 10xx xxxx 10xx xxxx
            char2 = str.charCodeAt(i++);
            char3 = str.charCodeAt(i++);
            out += String.fromCharCode(
              ((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
            );
            break;
        }
      }
      return out;
    },
    catchHistory(name, query) {
      if (local(0, "history") == null) {
        let data = [
          {
            name: name,
            query: query,
            path: `${this.$route.name}`,
            time: GetTime(),
          },
        ];

        local(1, "history", data);
      } else {
        let data = {
          name: name,
          query: query,
          path: `${this.$route.name}`,
          time: GetTime(),
        };

        local(1, "history", data);
      }
    },
    readHistory() {
      //获取数据 并对数据进行冒泡排序
      let datas = local(0, "history");

      if (datas != null) {
        for (let i = 0; i < datas.length; i++) {
          for (let j = 0; j < datas.length - i - 1; j++) {
            if (new Date(datas[j].time) < new Date(datas[j + 1].time)) {
              let temp = datas[j];
              datas[j] = datas[j + 1];
              datas[j + 1] = temp;
            }
          }
        }
      }

      this.data = datas;
    },
    routeChange(query, path) {
      this.$router.push({
        name: path,
        params: {
          sequence: query,
        },
      });
    },
  },
  computed: {
    routerParams() {
      if (this.$route.name == "fliecontent" || "projectcontent") {
        return this.$route.params.sequence;
      }
    },
  },
  watch: {
    historydrawershow: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.value = newValue;
      },
    },
    routerParams: {
      immediate: false,
      handler(newValue) {
        if (
          this.$route.name == "fliecontent" ||
          ("projectcontent" && newValue != undefined)
        ) {
          this.catchHistory(newValue, newValue);
        }
      },
    },
  },
};
</script>

<style lang="scss">
.el-drawer {
  width: 400px !important;
  z-index: 99999 !important;
  @include background-color($bgcolor-white);

  .historylist {
    @include sidenav-color($color-blackgray-light);
    width: 100%;
    margin: 0 auto;
    max-height: 95%;
    overflow-y: scroll;
    scrollbar-width: none;
  }

  .listitem {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10px;
    padding-top: 10px;
    height: 80px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;

    .itemimg {
      width: 40%;
      float: left;
      margin-right: 5%;
      min-width: 40%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        box-shadow: 1px 1px 3px gray;
      }
    }

    .itemhead {
      width: 60%;
      display: flex;
      flex-direction: column;
      float: left;
      position: relative;

      span {
        width: 100%;
      }

      .title {
        font-size: 0.8rem;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }

      .time {
        font-size: 0.7rem;
        position: absolute;
        bottom: 0px;
        color: #6a737d;

        i {
          margin-right: 10px;
        }
      }
    }
  }
  .listitem:hover {
    @include markdown-pre($bgcolor-gray);
  }
}
.historylist p {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  color: #6a737d;
}

.historylist::-webkit-scrollbar {
  width: 5px;
}

.historylist::-webkit-scrollbar-thumb {
  @include sidenav-scrollbar-thumb($bgcolor-gray);
}

.historylist::-webkit-scrollbar-track {
  @include sidenav-scrollbar-tack($color-normal-blue);
}
</style>